<template>
  <view class="container">
    <!-- 账号安全 -->
    <view class="section-title">账号安全</view>

    <!-- 修改密码 -->
    <view class="setting-item" @click="goToChangePassword">
      <view class="setting-label">修改密码</view>
      <view class="setting-arrow">></view>
    </view>

    <!-- 分隔线 -->
    <view class="separator"></view>

    <!-- 退出登录 -->
    <view class="setting-item" @click="logout">
      <view class="setting-label">退出登录</view>
      <view class="setting-arrow">></view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    goToChangePassword() {
      // 跳转到修改密码页面
      uni.navigateTo({
        url: '/pages/system_setup/change_password'
      });
    },
    logout() {
      // 执行退出登录操作，例如清除本地存储的用户信息等
      // 这里只是示例，具体的退出登录逻辑需要根据实际情况来实现
      uni.removeStorageSync('userInfo'); // 示例：清除本地存储的用户信息
      uni.showToast({
        title: '退出登录成功',
        icon: 'success'
      });
      // 跳转到登录页面
      uni.reLaunch({
        url: '/pages/login/login'
      });
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}

.setting-label {
  font-size: 16px;
}

.setting-arrow {
  color: #999;
}

.separator {
  height: 1px;
  background-color: #eee;
  margin: 20px 0;
}
</style>
